<div appBsModal #modal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal"
    aria-hidden="true" [config]="{backdrop: 'static'}">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <form #extendedDataForm="ngForm" novalidate (ngSubmit)="save()">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <span></span>
                    </h5>
                    <span class="pull-right">
                        <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')"
                            [disabled]="saving">
                            <i aria-hidden="true" class="bi bi-x"></i>
                        </button>
                    </span>
                </div>
                <div class="modal-body">
                    <ng-container #vc></ng-container>

                    <div class="checkbox-list" *ngIf="dataSynchronous">
                        <label class="checkbox">
                            <input id="autoSynchronous" type="checkbox" name="autoSynchronous"
                                [(ngModel)]="data.autoSynchronous">
                            <span></span>
                            {{"AutoSynchronous" | localize}}
                        </label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button [disabled]="saving" type="button" class="btn btn-default"
                        (click)="close()">{{"Cancel" | localize}}</button>
                    <button type="submit" class="btn btn-primary blue" *ngIf="permissions.extendedDataEdit"
                        [disabled]="!extendedDataForm.form.valid" [buttonBusy]="saving"
                        [busyText]="l('SavingWithThreeDot')"><i class="fa fa-save"></i> <span>{{"Save" |
                            localize}}</span></button>
                    <button [disabled]="saving" *ngIf="dataSynchronous && permissions.extendedDataEdit" type="button"
                            class="btn btn-primary blue" (click)="synchorization()"> <i class="bi bi-stickies"></i>{{"ManualSynchorization" |
                            localize}}</button>
                </div>
            </form>
        </div>
    </div>
</div>